<#--详情组件-->
<#assign detailComponent=(customPageConfig.updateOrCreateEditComponent == 'Drawer')?string('Drawer','Modal')>
<template>
    <div>
        <BasicTable @register="registerTable">
            <#if  customPageConfig.showAddBtn ||  customPageConfig.showExportBtn || customPageConfig.isBatch || customPageConfig.showImportBtn>
                <template #toolbar>
                    <#if customPageConfig.showAddBtn>
                        <a-button type="primary" @click="handleCreate"> 新增</a-button></#if>
                    <#if customPageConfig.showExportBtn>
                        <a-button type="primary" @click="handleExport"> 导出</a-button></#if>
                    <#if customPageConfig.showImportBtn>
                        <a-button type="primary" @click="handleImport"> 导入</a-button></#if>
                    <#if customPageConfig.isBatch??>
                        <a-button type="error" @click="batchDelete"> 批量删除</a-button></#if>
                </template>
            </#if>
            <#if  customPageConfig.showUpdateBtn ||  customPageConfig.showDelBtn>
                <template #action="{ record }">
                    <TableAction
                            :actions="[
                    <#if customPageConfig.showUpdateBtn>
                        {
                          icon: 'clarity:note-edit-line',
                          tooltip: '编辑',
                          onClick: handleEdit.bind(null, record),
                        },
                    </#if>
                    <#if customPageConfig.showDelBtn>
                        {
                          icon: 'ant-design:delete-outlined',
                          color: 'error',
                          tooltip: '删除',
                          popConfirm: {
                            title: '是否确认删除',
                            confirm: handleDelete.bind(null, record),
                          },
                        },
                     </#if>
                    ]"
                    />
                </template>
            </#if>
        </BasicTable>
        <${entity}${detailComponent} @register="register${detailComponent}" @success="handleSuccess" />
    </div>
</template>
<script lang="ts" setup>
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import {use${detailComponent}} from '/@/components/${detailComponent}';
    import ${entity}${detailComponent} from './${entity}${detailComponent}.vue';
    import {columns, searchFormSchema} from './${tsModelName}.data';
    import {useMessage} from '/@/hooks/web/useMessage';
    import {${entity}IDType} from '/@/api<#if package.ModuleName??>/${package.ModuleName}</#if>/model/${entity}Model';
    import {
        delete${entity}Batch,
        get${entity}Page
    } from '/@/api<#if package.ModuleName??>/${package.ModuleName}</#if>/${tsModelName}';


    // 初始化弹出模块
    const [register${detailComponent}, {open${detailComponent}}] = use${detailComponent}();
    // 消息提示
    const {createMessage,createConfirm} = useMessage();
    // 初始化表格
    const [registerTable, {reload, getSelectRows, clearSelectedRowKeys}] = useTable({
        title: '字典列表',
        api: get${entity}Page,
        columns,
        formConfig: {
            labelWidth: 120,
            schemas: searchFormSchema,
        },
        clickToRowSelect: false,
        useSearchForm: ${customPageConfig.existSearchField?string('true','false')},
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
        <#if !customPageConfig.isPage>pagination: ${customPageConfig.isPage?string('true','false')}, </#if>
        <#if customPageConfig.showUpdateBtn || customPageConfig.showDelBtn>
        actionColumn: {
            width: 80,
            title: '操作',
            dataIndex: 'action',
            slots: {customRender: 'action'},
            fixed: 'right',
        },
        </#if>
        rowSelection: {
            type: 'checkbox',
        },
    });

    function handleCreate() {
        open${detailComponent}(true, {
            isUpdate: false,
        });
    }

    function handleEdit(record: Recordable) {
        open${detailComponent}(true, {
            record,
            isUpdate: true,
        });
    }

    async function handleDelete(record: Recordable) {
        <#if customTableInfo.keyFlag>
        let params: Array<${entity}IDType> = [];
        params.push(record.${customTableInfo.keyName});
        await delete${entity}Batch(params);
        createMessage.success('删除成功');
        await reload();
        <#else >
        createMessage.error('当前操作数据表未指定主键，请自行修改删除逻辑')
        </#if>
    }

    function handleSuccess() {
        reload();
    }

    function handleExport() {

    }

    function handleImport() {

    }

    // 批量删除
    async function batchDelete() {
        <#if customTableInfo.keyFlag>
        let params: Array<${entity}IDType> = [];
        for (let _item of getSelectRows()) {
            params.push(_item.${customTableInfo.keyName});
        }
        if (params.length <= 0) {
            createMessage.warning('请至少选择一条记录');
            return;
        }

        createConfirm({
            iconType: 'warning',
            title: () => '删除提示',
            content: () => '确定要删除选中项吗！',
            okText: () => '立即删除',
            cancelText: () => '取消',
            onOk: async () => {
                await delete${entity}Batch(params);
                createMessage.success('删除成功');
                // 清空选择行
                clearSelectedRowKeys();
                await reload();
            }
        })
        <#else >
        createMessage.error('当前操作数据表未指定主键，请自行修改删除逻辑')
        </#if>
    }
</script>
<script lang="ts">
    export default {name: '${entity}'};
</script>
